Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Header aus gefloateten divs
Autor: Shrazaam
Datum: 08.06.2008 17:10:47
Hallo Leute,
ich hoffe ich störe nicht allzusehr mit diesem ewigen Thema. Ich bemühe mich darum, bei meiner neuen Website ohne Tabellenlayout auszukommen. Nun habe ich etwas zustande gebracht, was von FF und Opera so angezeigt wird, wie ich es haben möchte. Der IE stellt sich allerdings quer / befolgt vllt. einfach die korrekten Standards und mein Code ist quer?
http://www.jointshare.de/projekte/matheboerse2/
Hier findet ihr die Website und kommt an den Quellcode.
Links soll das Logo erscheinen. Daneben soll oben eine buttonartige Navigation sein, darunter erscheint dann die textbasierte Navigation.
Dies alles mit diesem blauen Hintergrund, der sich bis zur roten rechten Box erstrecken soll.
Die Box soll nur so groß sein, wie ihr Inhalt es erfordert.
Ich möchte eg. für die rote rechte Box keine Breitenangabe machen, weil das Formular ja in verschiedenen Auflösungen und Browsern unterschiedlich groß erscheint und ich es so klein halten will, wie möglich.
Das Problem ist, dass man afaik bei floatenden Elementen eine Breitenangabe machen muss, und width: auto nicht korrekt ist. Ist das richtig?
Wie kann ich das umgehen, bzw. auf korrektem Wege möglichst elegant erreichen, was ich vorhabe. Habt ihr Lösungs- bzw. Änderungsvorschläge?
Ich bin dankbar für jede Hilfe.
Gruß
Shrazaam
Hier findet ihr den CSS-Code
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: gaby
Datum: 08.06.2008 18:57:44
> Links soll das Logo erscheinen. Daneben soll oben
> eine buttonartige Navigation sein, darunter
> erscheint dann die textbasierte Navigation.
> Dies alles mit diesem blauen Hintergrund, der
> sich bis zur roten rechten Box erstrecken soll.
> Die Box soll nur so groß sein, wie ihr Inhalt es
> erfordert.
Hallo,
Du hast da eine ziemliche Div-Suppe generiert, und sehr viele Eigenschaften angegeben, die man auch weglassen könnte, da sie Defaultwerte enthalten.
Ich habe diese auf dem Screenshot mal etwas eingerückt und falsch geschrieben.
Wenn Du diese löschst, und dann die Datei als *.html-Datei und mit _internem_ Stylesheet (css zwischen <head> und </head>) nochmal zur Verfügung stellst, haben andere User (und Du) es übersichtlicher, und mit dem internen Stylesheet auch leichter zum Testen.
> Das Problem ist, dass man afaik bei floatenden
> Elementen eine Breitenangabe machen muss, und
> width: auto nicht korrekt ist.
Keine Breite anzugeben, ist zulässig.
Dann rendern standardkonforme Browser die Box so breit, wie ihr Inhalt es erfordert. Der IE-6 ist da allerdings etwas unberechenbar.
Grüße
gaby
http://gaby77.ga.funpic.de/forum/screens/shrazaam/css.jpg
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Re: Header aus gefloateten divs
Autor: Shrazaam
Datum: 09.06.2008 01:34:12
> Entscheide dich bitte für _EIN_ Forum!
>
> Multipostings sind nirgends gerne gesehen.
>
> Eine nachvollziehbare Begründung für unseren
> verständlichen Wunsch findest du hier:
> http://das-excel-forum.de/cross.htm
Zunächst möchte ich mich für das Multiposting entschuldigen. Ich bin dem Link gefolgt und habe mir die Infos durchgelesen. Ich hatte leider nicht nachgedacht, kann dem Statement aber nur zustimmen und mich nochmals entschuldigen - und mich darüberhinaus für die trotzdem gepostete, freundliche Antwort von Dir bedanken, gaby.
Wieder zur Sache:
Ich möchte anmerken, dass ich was HTML und CSS angeht, lediglich so viel Ahnung habe, dass ich beim Erstellen ohne WYSIWYG auskomme. Mit den Standards und Regeln kenne ich mich nicht aus.
> Du hast da eine ziemliche Div-Suppe generiert,
> und sehr viele Eigenschaften angegeben, die man
> auch weglassen könnte, da sie Defaultwerte
> enthalten.
Ich hatte zunächst an drei Divs gedacht:
1. Logo (links)
2. Navigationen (mitte)
3. Login-Formular (rechts)
Ich hatte folgendes vor:
Logo- und Login-Div sollten sich dynamisch dem Inhalt anpassen. Den Rest des horizontalen Raumes sollte der Navigationen-Div einnehmen. Letzteres wusste ich nicht zu bewerkstelligen.
Workaround: Alles auf width:auto; stellen. Dann alles in einen obergeordneten Div fügen. Dann diesem denselben Hintergrund geben, wie dem mittleren Div.
Das funktioniert ja auch für FF,Opera und IE7.
Frage: Codemäßig vertretbar? if not: Wie eleganter zu lösen?
> Ich habe diese auf dem Screenshot mal etwas
> eingerückt und falsch geschrieben.
> Wenn Du diese löschst, und dann die Datei als
> *.html-Datei mit _internem_ Stylesheet
> (css zwischen <head> und </head>) nochmal
> zur Verfügung stellst, haben andere User (und Du)
> es übersichtlicher, und mit dem internen
> Stylesheet auch leichter zum Testen.
Danke, erfolgt.
> Keine Breite anzugeben, ist zulässig.
> Dann rendern standardkonforme Browser die Box so
> breit, wie ihr Inhalt es erfordert.
Okay.
Dann ist es vllt. doch eher der IE6 der Probleme macht?
Unten findet ihr nochmal den Link zur Seite und außerdem einen Link zu einem Bild, auf dem zu sehen ist, was mir FF,Opera und IE6+7 anzeigen.
Wie man sieht, wird die Seite in IE7 und Firefox 3 Beta 5 "korrekt" angezeigt.
Opera zeigt keinen Abstand zwischen Header und Footer,
obwohl er in #koerper als margin: 5px 0px 0px 0px; definiert ist. Klappt das clear: both; im div.clear vllt. nicht richtig?
Der IE6 verbreitert den rechten (roten) Div auf den zur Verfügung stehenden Raum, statt die Breite dem Inhalt anzupassen. Die horizontale weiße Lücke, die zwischen dem Navi-Div und dem Login-Div sein sollte, befindet sich ganz links.
Außerdem wird der Hintergrund des Headers in einer zweiten Zeile nochmal angezeigt.
http://www.jointshare.de/projekte/matheboerse2/
http://www.jointshare.de/projekte/matheboerse2/images/matheboerse_opera_ff_ie.jpg
Gruß und Dank
Niklas
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: gaby
Datum: 09.06.2008 10:10:09
Bei größerer Schrift läuft der Text im Firefox aus seiner Box heraus. (Bild, s.o.)
Also sollte man dem #login-DIV entweder eine Höhe in 'em' geben, oder gar keine.
Eine Breite in 'em' wäre auch zu überlegen.
-----------
Zunächst würde ich sämtlich Rahmen um die Hintergrundgrafiken weglassen. Das macht das Design bei Schriftgrößenänderungen variabler.
Für Rahmen die Eigenschaft 'border' benutzen.
Normalerweise bindet man das Logo als Hintergrundbild ein und gibt dem nachfolgenden Div dann ein entsprechend großes 'margin-left', damit es das Logo nicht überdeckt.
Ich habe es in meinem bsp als IMG eingebunden und absolut positioniert.
Die weiße Lücke zwischen Login und Navi bekommst du, indem du das rote Hintergrundbild so _breit_ machst, wie erforderlich, und links einen kleinen Streifen weiß einbaust.
Hier ist mal ein Grobgerüst:
Bei Schriftvergrößerung dehnt sich das #login-DIV in Höhe und Breite aus.
http://gaby77.ga.funpic.de/forum/screens/shrazaam/grobgeruest.html
Der Navi würde ich keine feste Breite geben.
Bei schmalem Browserfenster bzw Anzeigebereich:
http://gaby77.ga.funpic.de/forum/screens/shrazaam/zweizeilig.jpg
Grüße
gaby
PS
Fairerweise solltest du im XHTML-Forum Bescheid sagen, daß dein Problem schon woanders versucht wird, zu lösen.
Dann braucht sich dort keiner mehr überflüssig die gleichen Gedanken zu machen und zu posten.
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Hintergrundgrafik wird nicht angezeigt (was: Header aus gefloateten divs)
Autor: gaby
Datum: 09.06.2008 16:37:27
Hi Forumiten,
Gerade schaue ich hier im Büro mit Firefox 2. 0. 0. 14 nochmal meine Datei an,
http://gaby77.ga.funpic.de/forum/screens/shrazaam/grobgeruest.html
und merke, daß die blaue und rote Hintergrundgrafik
http://www.jointshare.de/projekte/matheboerse2/images/bannerhg.jpg
und
http://www.jointshare.de/projekte/matheboerse2/images/banner2hg.jpg
nicht angezeigt wird.
Zu Hause mit Firefox 1.5, IE-6, IE-7 und Opera-9.2 war alles in Ordnung.
Weiß einer von Euch, woran das liegen könnte?
Wenn ich mir die beiden Grafiken _lokal_ speichere und entsprechend verlinke, wird alles wieder normal angezeigt.
Hmmm?
Seltsam?
Ach so, ja, beide Male unter Windows XP.
Grüße
gaby
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Hintergrundgrafik wird nicht angezeigt
Autor: Freddy
Datum: 09.06.2008 16:51:01
Hallo,
> und merke, daß die blaue und rote
> Hintergrundgrafik [...]
> nicht angezeigt wird.
>
> Zu Hause mit Firefox 1.5, IE-6, IE-7 und
> Opera-9.2 war alles in Ordnung.
> Weiß einer von Euch, woran das liegen könnte? [...]
Vielleicht hilft's, wenn Du
url(http://www.jointshare.de/projekte/matheboerse2/images/bannerhg.jpg)
durch
url("http://www.jointshare.de/projekte/matheboerse2/images/bannerhg.jpg")
ersetzt?
Gruß,
Freddy
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Hintergrundgrafik wird nicht angezeigt
Autor: gaby
Datum: 09.06.2008 17:06:45
Moin,
> Vielleicht hilft's, wenn Du >
> url(http://www.jointshare.de/projekte/matheboerse2/images/bannerhg.jpg)
>
> durch >
> url("http://www.jointshare.de/projekte/matheboerse2/images/bannerhg.jpg")
>
> ersetzt?
Ist das nicht Frontpatsch-Syntax? *bg*
Geht leider auch nicht.
Also, ich kann es hier ja nur lokal testen, aber wenn ich die absoluten Pfade angebe, müßte es ja auch funktionieren.
Beim Test mit _relativen_ Pfaden auf dem PC kein Problem.
Wird es denn _bei Euch_ im Firefox-2. 0. 0 14 angezeigt?
Grüße
gaby
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Hintergrundgrafik wird nicht angezeigt
Autor: Freddy
Datum: 09.06.2008 17:12:26
Hallo,
> Ist das nicht Frontpatsch-Syntax? *bg*
Was soll daran Frontpage-Syntax sein? Ich habe und hatte noch nie Frontpage, also kenne ich mich da nicht so aus.
> Geht leider auch nicht.
> Also, ich kann es hier ja nur lokal testen, aber
> wenn ich die absoluten Pfade angebe, müßte es ja
> auch funktionieren.
> Beim Test mit _relativen_ Pfaden auf dem PC kein
> Problem.
Eigentlich sollte es ja egal sein, ob relativ oder absolute Pfade, aber habe ich nicht mal gelesen, dass der Pfad in Anführungszeichen (einfache oder doppelte) gehört?
> Wird es denn _bei Euch_ im Firefox-2. 0. 0
> 14 angezeigt?
Jap.
Gruß,
Freddy
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Hintergrundgrafik wird nicht angezeigt
Autor: gaby
Datum: 09.06.2008 17:21:34
> > Ist das nicht Frontpatsch-Syntax? *bg*
>
> Was soll daran Frontpage-Syntax sein? Ich habe
> und hatte noch nie Frontpage, also kenne ich mich
> da nicht so aus.
Ich habe Frontpatsch zu Hause, deshalb kenne ich es. ;-)
> > Wird es denn _bei Euch_ im Firefox-2. 0. 0. 14 angezeigt?
> Jap.
Thanks, das wollte ich hören. :-)
Dann hat der doofe Admin hier an meinem Firefox etwas gefummelt .... oder _ich_ wars. *g*
*schnellweg* ;-)
Grüße
gaby
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: Shrazaam
Datum: 10.06.2008 01:23:30
Hallo,
> Bei größerer Schrift läuft der Text im Firefox
> aus seiner Box heraus. (Bild, s.o.)
> Also sollte man dem #login-DIV entweder eine Höhe
> in 'em' geben, oder gar keine.
> Eine Breite in 'em' wäre auch zu überlegen.
>
Beides erfolgt.
>
> Zunächst würde ich sämtlich Rahmen um die
> Hintergrundgrafiken weglassen. Das macht das
> Design bei Schriftgrößenänderungen variabler.
> Für Rahmen die Eigenschaft 'border' benutzen.
>
Erfolgt. Ich habe jetzt auf die Lücke zwischen Nav-Div und Login-Div einfach verzichtet und das restliche Design etwas angepasst.
> Normalerweise bindet man das Logo als
> Hintergrundbild ein und gibt dem nachfolgenden
> Div dann ein entsprechend großes 'margin-left',
> damit es das Logo nicht überdeckt.
Ich habe das Logo nun wie Du in Deinem Beispiel einfach in den body gepackt und mittels position: absolute positioniert.
> Die weiße Lücke zwischen Login und Navi bekommst
> du, indem du das rote Hintergrundbild so _breit_
> machst, wie erforderlich, und links einen kleinen
> Streifen weiß einbaust.
Aus Ladezeitgründen ist das Hintergrundbild des Login-Div ja nur 1px breit und wird wiederholt. Somit würde die Lücke ja auch wiederholt werden. Aber das hat sich ja jetzt sowieso erledigt.
> Hier ist mal ein Grobgerüst:
> Bei Schriftvergrößerung dehnt sich das #login-DIV
> in Höhe und Breite aus.
>
Danke, ich habe drübergeschaut und ein paar Anregungen aufgefasst.
>
> Der Navi würde ich keine feste Breite geben.
> Bei schmalem Browserfenster bzw Anzeigebereich:
>
>
> http://gaby77.ga.funpic.de/forum/screens/shrazaam/zweizeilig.jpg
>
Ja, so wird es laufen. Allerdings sollte das wirklich erst bei sehr niedrigen Auflösungen oder sehr großem Schriftgrad auftreten.
>
>
> PS
> Fairerweise solltest du im XHTML-Forum Bescheid
> sagen, daß dein Problem schon woanders versucht
> wird, zu lösen.
> Dann braucht sich dort keiner mehr überflüssig
> die gleichen Gedanken zu machen und zu posten.
>
Gemacht.
So. Nun bekomme ich in Opera 9.2, FF2, FF3 Beta 5 und IE7 das Gewünschte angezeigt.
Der IE6 stellt sich allerdings immernoch quer. Er zeigt erstens das Logo überhaupt nicht an (wtf?!) Sorry, aber langsam verzweifle ich damit.
Zweitens zeigt er den Navi-Div viel zu weit rechts an und deswegen selbst bei einer Auflösung von 1024x768 Pixeln und normalen Schriftgrad auf einem 17"-Monitor einen zweizeiligen Header.
Der IE7 liefert unter selbiger sonstiger Konstellation, wie gesagt, ein vernünftiges Resultat.
Falls ihr nochmal drüber guckt und euch ein paar Gedanken macht, wäre ich euch wirklich sehr dankbar.
Also besten Dank schonmal und liebe Grüße
Niklas
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: netinja
Datum: 10.06.2008 11:21:53
> Erfolgt. Ich habe jetzt auf die Lücke zwischen
> Nav-Div und Login-Div einfach verzichtet und das
> restliche Design etwas angepasst.
Ich fand es mit der Lücke optisch ansprechender.
> Aus Ladezeitgründen ist das Hintergrundbild des
> Login-Div ja nur 1px breit und wird wiederholt.
> Somit würde die Lücke ja auch wiederholt werden.
> Aber das hat sich ja jetzt sowieso erledigt.
Das macht es aber für die User hier unnötig schwer, dir zu helfen.
Wenn im Firefox etwas falsch läuft, können wir mit einem speziellen Programm bei der Fehlerseite Änderungen simulieren, ohne dass wir uns deine ganze Seite auf den PC herunterladen müssen. Der IE hat leider nicht so ein Tool.
Deshalb muss man sich deine Seite zum Testen auf die eigene Festplatte holen.
Dabei kommen die Hintergrundbilder aber nicht mit. Man muss sich jedes einzeln herunterladen, speichern und im Quellcode den Link anpassen. Jetzt sind deine Hintergrundbilder aber leider so schmal, dass man sie schlecht zu fassen bekommt, denn man muss mit der Maus ja genau darauf kommen.
Wenn du sie nur ein bischen breiter machen würdest, würde das auch nicht länger laden.
> > Der Navi würde ich keine feste Breite geben.
> > Bei schmalem Browserfenster bzw Anzeigebereich:
> >
> http://gaby77.ga.funpic.de/forum/screens/shrazaam/zweizeilig.jpg
> Ja, so wird es laufen. Allerdings sollte das
> wirklich erst bei sehr niedrigen Auflösungen oder
> sehr großem Schriftgrad auftreten.
Ich habe bspw im Moment zeitweise nur meinen alten 15"-Bildschirm, da mir mein 17er kaputtgegangen ist. Dort wäre eine größere Auflösung als 800 x 600 gar nicht sinnvoll.
Mein Browserfenster ist also höchstens 800px breit.
Ausserdem muss das Herunterrutschen in die nächste Zeile nicht nur bei kleinen Auflösungen vorkommen. Es kommt darauf an, wie gross das Browserfenster ist.
Gaby hat hier mal vor langer Zeit eine Demo verlinkt, bei der aber jetzt leider auf jeder Seite die Werbung kommt. :-(
http://gaby77.ga.funpic.de/FAQ/anzeigebereich/anzeige-1.html
@ gaby
Hattest du da nicht mal die Werbung von funpic erfolgreich ausgeschaltet? :-D
> Zweitens zeigt er den Navi-Div viel zu weit
> rechts an und deswegen selbst bei einer Auflösung
> von 1024x768 Pixeln und normalen Schriftgrad auf
> einem 17"-Monitor einen zweizeiligen Header.
Die Erfahrung habe ich leider auch schon gemacht, dass der IE6 bei verschachtelten Floats riesige Probleme macht. Deshalb vermeide ich sie, wo es geht. :-D
> Falls ihr nochmal drüber guckt und euch ein paar
> Gedanken macht, wäre ich euch wirklich sehr dankbar.
Dein Div-Salat und die vielen unnützen IDs machen es sehr schwer, sich darin zurechtzufinden. Lies mal hier:
http://yatil.de/artikel/der-div-wahnsinn#bedeutung
Beispielsweise ist das div um die Liste herum total überflüssig.
<div id="kopf_mi">
<div>
<UL id='kopf_mi_o_nav'>
<LI id='kopf_mi_o_nav_links'>
<a href='aaa'>Schulaufgaben</a>
</LI>
Wenn du nur EINE Liste in dem div kopf_mi hast, brauchst du nicht der Liste und erst recht nicht auch noch den Listelementen nochmal extra IDs zu geben. Es reicht, wenn du es so schreibst
<div id="kopf_mi">
<UL>
<LI> <a href='aaa'>Schulaufgaben</a> </LI>
usw.
Im Stylesheet benutzt du Elementselektoren für die Eigenschaften.
#kopf_mi { }
#kopf_mi ul { }
#kopf_mi ul li { }
Ich würde auch den Divs, die ein Hintergrundbild haben, zusätzlich noch eine ähnliche HintergrundFARBE geben.
Wenn das bg-bild aus irgendeinem Grund mal nicht angezeigt werden kann, bleibt der Hintergrund weiss, und dann hat die weisse Schrift darin keinen Kontrast mehr.
LG
netinja
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: Shrazaam
Datum: 10.06.2008 14:16:19
> Ich fand es mit der Lücke optisch ansprechender.
Hmm.. das werde ich jetzt aber eventuell so lassen. Mal schauen. Aber danke für den Hinweis.
> > Aus Ladezeitgründen ist das Hintergrundbild des
> > Login-Div ja nur 1px breit und wird wiederholt.
> > Somit würde die Lücke ja auch wiederholt werden.
> > Aber das hat sich ja jetzt sowieso erledigt.
>
> Das macht es aber für die User hier unnötig
> schwer, dir zu helfen.
> Wenn im Firefox etwas falsch läuft, können wir
> mit einem speziellen Programm bei der Fehlerseite
> Änderungen simulieren, ohne dass wir uns deine
> ganze Seite auf den PC herunterladen müssen. Der
> IE hat leider nicht so ein Tool.
> Deshalb muss man sich deine Seite zum Testen auf
> die eigene Festplatte holen.
> Dabei kommen die Hintergrundbilder aber nicht
> mit. Man muss sich jedes einzeln herunterladen,
> speichern und im Quellcode den Link anpassen.
> Jetzt sind deine Hintergrundbilder aber leider so
> schmal, dass man sie schlecht zu fassen bekommt,
> denn man muss mit der Maus ja genau darauf
> kommen.
> Wenn du sie nur ein bischen breiter machen
> würdest, würde das auch nicht länger laden.
>
Okay, dann weiß ich nun wie ihr fleißigen Helfer das macht. Ist erfolgt.
> Ich habe bspw im Moment zeitweise nur meinen
> alten 15"-Bildschirm, da mir mein 17er
> kaputtgegangen ist. Dort wäre eine größere
> Auflösung als 800 x 600 gar nicht sinnvoll.
> Mein Browserfenster ist also höchstens 800px
> breit.
> Ausserdem muss das Herunterrutschen in die
> nächste Zeile nicht nur bei kleinen Auflösungen
> vorkommen. Es kommt darauf an, wie gross das
> Browserfenster ist.
> Gaby hat hier mal vor langer Zeit eine Demo
> verlinkt, bei der aber jetzt leider auf jeder
> Seite die Werbung kommt. :-(
Nun gut. Letztendlich habe ich versucht, das Logo möglichst klein zu machen. Und die Navi verbraucht auch nur den nötigen Platz. Wenn es in zwei Zeilen rutscht, dann sei es drum. Wenn zu wenig Platz vorhanden ist, ist das nicht vermeidbar. Die Sache ist sowieso folgende: Der hauptsächliche Inhalt der Seite werden Matheaufgaben sein (nein wirklich?! ;). D.h. man guckt sich unter dem Banner soetwas wie Arbeitsblätter an, die man noch von damals aus der Schule kennt. Das geht nuneinmal nicht im minimierten Fenster bei 800x600. Das wissen die Lehrer aber. Die arbeiten ja sonst auch in Word unter vernünftigen Bedingungen an ihren ABs.
> Die Erfahrung habe ich leider auch schon gemacht,
> dass der IE6 bei verschachtelten Floats riesige
> Probleme macht. Deshalb vermeide ich sie, wo es
> geht. :-D
Das habe ich jetzt auch getan. Ich Vollidiot. Jetzt wo ich nur noch 2 Divs habe, kann ich doch viel besser mit position: absolute; arbeiten. Da der Login-Div nun eine feste Breite in em hat, kommt auch die Möglichkeit die Lücke von rechts aus zu platzieren wieder ins Spiel. Ich werde das ggf. mal ausprobieren.
> Dein Div-Salat und die vielen unnützen IDs machen
> es sehr schwer, sich darin zurechtzufinden. Lies
> mal hier:
Die ganzen Ids kommen zustande, weil ich bei der oberen Nav im Navi-Div immer ganz bestimmte Border angezeigt haben will, je nachdem ob sich z.B. rechts vom gehoverten Button der aktive Butten befindet, oder links. So dass eben dieses Gefühl vom Durchblättern durch Registerkarten aufkommt. Ich lasse also PHP immer feststellen welche Konstellation herrscht und über die IDs kann ich dann gezielt den verschiedenen Listenelementen ihre spezifischen Border geben. Wenn du dir das ganze genau anschaust (damit meine ich jetzt nicht im Quelltext), dann siehst du, dass die Border nicht immer gleich sind, sondern, dass es wirklich davon abhängt, welcher Link aktiv ist, ob ein Link ganz links ist, oder ganz rechts usw.
Ich wusste es nicht eleganter zu lösen.
> http://yatil.de/artikel/der-div-wahnsinn#bedeutung
>
> Beispielsweise ist das div um die Liste herum
> total überflüssig.
Das ist doch der Bereich in dem sich beide Navigationen befinden. Und in dem auch der Abstand nach links definiert ist, damit das Logo Platz hat.
> <div id="kopf_mi"> <div>>
> <UL id='kopf_mi_o_nav'>
> <LI id='kopf_mi_o_nav_links'>
> <a href='aaa'>Schulaufgaben</a> </LI>
>
> Wenn du nur EINE Liste in dem div kopf_mi hast,
> brauchst du nicht der Liste und erst recht nicht
> auch noch den Listelementen nochmal extra IDs zu
> geben. Es reicht, wenn du es so schreibst
>
> <div id="kopf_mi">
> <UL>
> <LI> <a href='aaa'>Schulaufgaben</a> </LI>
>
> usw.
>
> Im Stylesheet benutzt du Elementselektoren für
> die Eigenschaften.
Dann kann ich aber, wie bereits geschildert, nur alle Listenelemente gleichzeitig ansprechen. Ich muss aber bestimmte Listenelemente nach bestimmten Kriterien ansprechen. Die Auswahl dieser Kriterien kann aber nicht von CSS erfolgen, weil dazu die Grammatik nicht ausreicht. Das kann nur PHP. Ich kann ja in CSS nicht folgendes machen:
Wenn nächstes Listenelement gleich span, dann li a:hover border-links: 1px solid #000000;.
>
> Ich würde auch den Divs, die ein Hintergrundbild
> haben, zusätzlich noch eine ähnliche
> HintergrundFARBE geben.
> Wenn das bg-bild aus irgendeinem Grund mal nicht
> angezeigt werden kann, bleibt der Hintergrund
> weiss, und dann hat die weisse Schrift darin
> keinen Kontrast mehr.
>
Erfolgt.
So nun kann man auch im IE6 die Seite zumindest halbwegs vernünftig betrachten. Nach wie vor wird alledings das Logo nicht angezeigt, was ich gar nicht verstehe. (?!)
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: gaby
Datum: 10.06.2008 16:13:43
> > Wenn du nur EINE Liste in dem div kopf_mi hast,
> > brauchst du nicht der Liste und erst recht nicht
> > auch noch den Listelementen nochmal extra IDs zu
> > geben.
> Dann kann ich aber, wie bereits geschildert, nur
> alle Listenelemente gleichzeitig ansprechen. Ich
> muss aber bestimmte Listenelemente nach
> bestimmten Kriterien ansprechen. Die Auswahl
> dieser Kriterien kann aber nicht von CSS
> erfolgen, weil dazu die Grammatik nicht
> ausreicht.
Du hast doch selbst zugegeben, daß du in CSS noch nicht so fit bist.
Ich bin ziemlich sicher, daß das gewünschte Aussehen auch mit CSS machbar ist, und bei nur 3 Links ist IMO der Aufwand auch vertretbar.
> Die Sache ist sowieso folgende: Der
> hauptsächliche Inhalt der Seite werden
> Matheaufgaben sein (nein wirklich?! ;). D.h. man
> guckt sich unter dem Banner soetwas wie
> Arbeitsblätter an, die man noch von damals aus
> der Schule kennt. Das geht nuneinmal nicht im
> minimierten Fenster bei 800x600. Das wissen die
> Lehrer aber. Die arbeiten ja sonst auch in Word
> unter vernünftigen Bedingungen an ihren ABs.
Geht es denn nur um die Lehrer?
Die Site ist doch hauptsächlich für _Schüler_, und da kann man nicht (besonders nicht bei kinderreichen Familien) voraussetzen, daß jedes Kind über genügend fortschrittliche Hardware verfügt.
War es in deiner letzten Version bei kleinem viewport nur ein optisches Problem, so ist es jetzt ein _funktionelles_, und damit sehr schwerwiegendes Problem, denn das Menü wird dabei verdeckt.
Die Navi unter _allen_ Konfigurationen zugänglich und bedienbar zu halten, ist aber die absolute Hauptanforderung an eine Site.
> Jetzt wo ich nur noch 2 Divs habe, kann ich doch
> viel besser mit position: absolute; arbeiten.
...die schlechteste aller Lösungswege!
> der Login-Div nun eine feste Breite in em hat,
> kommt auch die Möglichkeit die Lücke von rechts
> aus zu platzieren wieder ins Spiel. Ich werde das
> ggf. mal ausprobieren.
Das richtige Vorgehen wäre IMO, zuerst dafür zu sorgen, daß die äußeren Container sich richtig platzieren, und deren Inhalte auch bei _jeder_ Viewportbreite noch erreichbar ist. Daß das Design unterhalb einer gewissen Breite etwas verschoben aussieht, kann man eher akzeptieren, als Unlesbarkeit (Überdecktwerden), so wie es jetzt ist. Die Breite aber, ab der es sich unschön verschiebt, möglichst klein zu halten, macht eine gute Site aus.
IMO sollte man deshalb in Kauf nehmen, daß bei kleinem Fenster sich die Links deiner Navi und/oder die Eingabefenster im #login-Div _untereinander_ stapeln dürfen.
bsp
http://gaby77.ga.funpic.de/forum/screens/shrazaam/grobgeruest-2.html
(ist nur ein Konzept, und noch nicht vollständig ausgearbeitet)
> So nun kann man auch im IE6 die Seite zumindest
> halbwegs vernünftig betrachten. Nach wie vor wird
> alledings das Logo nicht angezeigt, was ich gar
> nicht verstehe. (?!)
Du hast ein weiteres absolut positioniertes oder floatendes Element darübergelegt.
Grüße
gaby
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: gaby
Datum: 10.06.2008 16:28:14
> > Wenn im Firefox etwas falsch läuft, können wir
> > mit einem speziellen Programm bei der Fehlerseite
> > Änderungen simulieren, ohne dass wir uns deine
> > ganze Seite auf den PC herunterladen müssen. Der
> > IE hat leider nicht so ein Tool.
Mit Frontpage geht es auch für den IE.
Bedingung hierfür ist aber, daß die Testdatei als *.html-Datei, und nicht als *.php-Datei vorliegt.
> > Gaby hat hier mal vor langer Zeit eine Demo
> > verlinkt, bei der aber jetzt leider auf jeder
> > Seite die Werbung kommt. :-(
> > Hattest du da nicht mal die Werbung von funpic
> > erfolgreich ausgeschaltet? :-D
Ja, das hatte ich.
Verflucht, diese Spammer von funpic sind lernfähig. :-((
Sie knallen mir jetzt ihre Styles für den Werbemist (noch dazu mit der important-Anweisung) ins interne Stylesheet. Da kann ich nichts mehr dagegen machen. :-((
Grüße
gaby
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: Shrazaam
Datum: 10.06.2008 20:12:37
> Du hast doch selbst zugegeben, daß du in CSS noch
> nicht so fit bist.
> Ich bin ziemlich sicher, daß das gewünschte
> Aussehen auch mit CSS machbar ist, und bei nur 3
> Links ist IMO der Aufwand auch vertretbar.
>
Es ist jedenfalls keine Programmiersprache. Somit verfügt sie über eine Grammatik niedrigerer Ordnung als PHP, ich rede hier vom Konzept der Chompsky-Hierarchie.
Damit kenne ich mich aus. ;)
>
> War es in deiner letzten Version bei kleinem
> viewport nur ein optisches Problem, so ist es
> jetzt ein _funktionelles_, und damit sehr
> schwerwiegendes Problem, denn das Menü wird dabei
> verdeckt.
> Die Navi unter _allen_ Konfigurationen zugänglich
> und bedienbar zu halten, ist aber die absolute
> Hauptanforderung an eine Site.
>
Oh, tatsächlich. :(
Das ist mir grade erst aufgefallen.
> > Jetzt wo ich nur noch 2 Divs habe, kann ich
> doch
> > viel besser mit position: absolute;
> arbeiten.
>
> ...die schlechteste aller Lösungswege!
>
Gut da stimme ich zu, während ich also langsam verzweifle.
> Das richtige Vorgehen wäre IMO, zuerst dafür zu
> sorgen, daß die äußeren Container sich richtig
> platzieren, und deren Inhalte auch bei _jeder_
> Viewportbreite noch erreichbar ist. Daß das
> Design unterhalb einer gewissen Breite etwas
> verschoben aussieht, kann man eher akzeptieren,
> als Unlesbarkeit (Überdecktwerden), so wie es
> jetzt ist. Die Breite aber, ab der es sich
> unschön verschiebt, möglichst klein zu halten,
> macht eine gute Site aus.
>
> IMO sollte man deshalb in Kauf nehmen, daß bei
> kleinem Fenster sich die Links deiner Navi
> und/oder die Eingabefenster im
> #login-Div _untereinander_ stapeln
> dürfen.
>
> bsp
>
>
> http://gaby77.ga.funpic.de/forum/screens/shrazaam/grobgeruest-2.html
>
> (ist nur ein Konzept, und noch nicht vollständig
> ausgearbeitet)
>
Vielen Dank. Ich habe wieder drübergeschaut und die Seite entsprechend angepasst.
Ich habe übrigens rausgefunden, dass der Opera keine Kommazahlen bei em-Angaben akzeptiert. Er nimmt immer den jeweils nächsten ganzzahligen Wert. Das habe ich jetzt insgesamt berücksichtigt, damit es überall gleich aussieht.
So wie ich die Navigation hatte, stapelt sie sich in deinem Vorschlag auch untereinander. Soweit so gut.
Der Container vergrößert sich jedoch nicht, wenn sich die Navigation untereinanderstapelt. D.h. es rutscht einfach alles aus dem Container heraus und in den Main-Bereiach herein. :/
Gibt es dazu noch Lösungen, bzw. sonst noch etwas was am derzeitigen Entwurf nicht okay ist?
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
[OT] Site komplett mit Grafiken runterladen
Autor: RolandScull
Datum: 10.06.2008 20:34:21
> Mit Frontpage geht es auch für den IE.
> Bedingung hierfür ist aber, daß die Testdatei als
> *.html-Datei, und nicht als *.php-Datei
> vorliegt.
Wenn es sein muss, nehme ich ein kleines Programm namens Xaldon-Webspider. Das saugt eigentlich alle Dateien mit runter, die zur Site gehören, wenn die Verzeichnisse nicht geschützt sind.
Bei PHP-Sites speichert es die resultierenden HTML-Dateien ab.
Hat bei Renovierungs-Projekten schon gute Dienste geleistet.
Ist natürlich trotzdem motivierender, wenn man weiß, das der Poster(?)sich auch einen Kopf gemacht hat, wie er einem Helfer das Helfen erleichtern kann.
LG Roland
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: netinja
Datum: 10.06.2008 21:44:40
http://www.jointshare.de/projekte/matheboerse2/
> Gibt es dazu noch Lösungen, bzw. sonst noch etwas
> was am derzeitigen Entwurf nicht okay ist?
Du hast eine ungünstige Zeit erwischt, denn gleicht kommt Fussball. :-D
Mir ist es deshalb jetzt ein bischen zu aufwändig, mich in die vielen IDs hineinzuknien, deshalb nur ein paar allgemeine Tipps:
font-family und font-size brauchst du nicht jedesmal wieder von neuem anzugeben, wenn der Wert gleichbleibt.
Setze sie *einmal* ins übergeordnete Div, am besten in "body". Sie vererben sich auf alle untergeordneten Elemente. Nur dort, wo der Wert sich ändert, gibst du sie eben nochmal im Selektor an.
lieber px statt pt benutzen.
http://aktuell.de.selfhtml.org/artikel/archiv/fontsize/index.htm
Sicherheitshalber solltest du auch das hier beachten:
http://www.selfhtml.de/forum/zeigebeitrag_1_113714_113489_0.php
padding:0, margin:0 und width: auto brauchst du bei den anderen Elementen nicht immer wieder anzugeben.
Lass es weg, dann wirds auch weniger Code. ;-)
>
>
> So wie ich die Navigation hatte, stapelt sie sich
> in deinem Vorschlag auch untereinander. Soweit so gut.
>
> Der Container vergrößert sich jedoch nicht, wenn
> sich die Navigation untereinanderstapelt. D.h. es
> rutscht einfach alles aus dem Container heraus
> und in den Main-Bereiach herein. :/
>
>
Firefox macht es richtig.
Du hast dem #kopf eine feste Höhe von 5em gegeben, und den Kindelementen #kopf-mi und #kopf-re 100%.
Das heisst, dass sie nun auch die Höhe von 5em haben, egal wieviel Platz ihr Inhalt braucht.
Der IE6 macht es falsch.
LG
netinja
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: Shrazaam
Datum: 12.06.2008 17:22:12
Ich habe meinen CSS-Code nochmal aufgeräumt, danke für die Hinweise.
> lieber px statt pt benutzen.
>
> http://aktuell.de.selfhtml.org/artikel/archiv/fontsize/index.htm
Ich weiß nicht... Auf selfhtml steht in den Kapiteln zum guten Stil beim Schreiben von Webseiten, dass man lieber pt verwenden sollte, um dem Betrachter nicht die Möglichkeit zu nehmen, die Schriftgröße anzupassen. Ich meine, wenn die Schriftgröße nicht anzupassen ist, dann kann ich mir auch das Verwenden von em sparen.
> Sicherheitshalber solltest du auch das hier
> beachten:
> http://www.selfhtml.de/forum/zeigebeitrag_1_113714_113489_0.php
Danke für den Hinweis. Ich wäre sonst auch drüber gestolpert.
> Firefox macht es richtig.
> Du hast dem #kopf eine feste Höhe von 5em
> gegeben, und den Kindelementen #kopf-mi und
> #kopf-re 100%.
> Das heisst, dass sie nun auch die Höhe von 5em
> haben, egal wieviel Platz ihr Inhalt braucht.
> Der IE6 macht es falsch.
Das leuchtet ein. Ich habe die Höhe jetzt variabel gemacht und es so eingerichtet, dass bei normaler Anzeige beide Divs trotzdem gleich hoch sind. Bei einer verbreiterten Anzeige wächst dann halt nur der linke Div. Ich würde nichtmal sagen, dass das schlecht ist, weil im rechten Div ohnehin weniger Infos abgedruckt sein werden. Die sehen dann nicht so deplaziert aus.
Vielen Dank für eure Hilfe. So wie es jetzt steht bin ich sehr zufrieden mit dem Ergebnis. Falls ihr noch mehr Anmerkungen habt, dann schreibt ruhig, ich werde in regelmäßigen Abständen hier reinschauen. Vielleicht taucht ja auch demnächst wieder ein neues Problem auf, dann werde ich selbst wohl nochmal schreiben. ;)
Jetzt geht's erstmal an den PHP-Code.
Vielen lieben Dank und liebe Grüße
Niklas
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: RolandScull
Datum: 12.06.2008 22:20:14
> Webseiten, dass man lieber pt verwenden sollte,
> um dem Betrachter nicht die Möglichkeit zu
> nehmen, die Schriftgröße anzupassen. Ich meine,
> wenn die Schriftgröße nicht anzupassen ist, dann
> kann ich mir auch das Verwenden von em sparen.
Hm, also am nutzerfreundlichsten ist nach allem, was ich bisher gelesen habe (und das war schon ein bisschen, ehrlich!) in den allermeisten Fällen, wenn du die Schrift-Größe in "em" angibst. Die Einheit "pt" hat nach meiner Kenntnis im Webdesign eher nichts zu suchen. Ist für den Druck gedacht, und könnte in ein stylesheet für Drucker rein.
Natürlich musst du bei relativer Größenangabe der Schrift auch darauf achten, dass sich das Drumrum mit ausdehen kann, ohne dass das Layout zerschießt, also entsprechend großzügig (und relativ) mit Hintergrundbildern etc. umgehen.
LG Roland
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: Shrazaam
Datum: 13.06.2008 16:40:08
> Hm, also am nutzerfreundlichsten ist nach allem,
> was ich bisher gelesen habe (und das war schon
> ein bisschen, ehrlich!) in den allermeisten
> Fällen, wenn du die Schrift-Größe in "em"
> angibst. Die Einheit "pt" hat nach meiner
> Kenntnis im Webdesign eher nichts zu suchen. Ist
> für den Druck gedacht, und könnte in ein
> stylesheet für Drucker rein.
>
> Natürlich musst du bei relativer Größenangabe der
> Schrift auch darauf achten, dass sich das Drumrum
> mit ausdehen kann, ohne dass das Layout
> zerschießt, also entsprechend großzügig (und
> relativ) mit Hintergrundbildern etc. umgehen.
Ich habe auch nochmal einen Artikel dazu gefunden,
Habe es jetzt so gelöst, wie dort vorgeschlagen.
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Re: Header aus gefloateten divs
Autor: gaby
Datum: 13.06.2008 18:57:37
> Ich habe auch nochmal einen Artikel dazu
> gefunden,
> Habe es jetzt so gelöst, wie dort vorgeschlagen.
[alistapart]
body { font-size: 100% }
hatte ich ja auch schon in meiner ersten verlinkten Beispiel-Datei drin, allerdings ohne zu erklären, warum, und auch ohne dein 'pt' zu monieren.
Ich hatte halt damit gerechnet, daß Du meine Version übernimmst, und dann für deine Zwecke entsprechend erweiterst.
Bei Deiner neuen Version ist mir noch noch Einiges im CSS aufgefallen:
Gib der Liste mal testweise einen Rahmen, dann kannst Du Folgendes besser nachvollziehen.
1. Du siehst momentan einen linken Abstand der LI-Elemente zum Rahmen.
(Bild-1, s.o.)
Grund:
Dein Selektor #kopf_mi_o_nav ul {... } greift nicht, da er nicht zu der Syntax paßt, die Du im html-Code vergeben hast.
<UL id='kopf_mi_o_nav'>
demnach müßte der Selektor
ul#kopf_mi_o_nav { } heißen.
Unabhängig davon ist es aber vorteilhafter, mit dem Element-Selektor
ul { } die Innen-und Außenabstände _aller_ Listen, die in Deinem Dokument vorkommen, auf 0 zu setzen.
Nun ist der Abstand der LI-Elemente zum Rahmen verschwunden, und somit wird auch die Eigenschaft
#kopf_mi_o_nav {
margin: 0px 0px 0em 2em;}
überflüssig, da
ul {
margin: 0;
padding: 0; }
schon dafür sorgt, daß die Navi-Liste ganz nah an den Rand gerückt wird.
(Bild-2, s.o.)
2. Du hast der Liste 'text-align: center;' gegeben, aber noch nicht bemerkt, daß überhaupt nichts zentriert wird.
Grund ist das 'float: left' im a-Element.
Damit wird der Link zu einem _Block-Element_, aber 'text-align: center' im übergeordneten Element zentriert nur _Inline-Elemente_.
'width: auto;' ist hier natürlich überflüssig, aber das sagte netinja schonmal.
http://gaby77.ga.funpic.de/forum/screens/shrazaam/css-2.jpg
Ich habe mal die zu löschenden Eigenschaften eingerückt, und die neu hinzugekommenen ausgerückt. Mit diesem CSS kannst Du das Umbrechen der Navi maximal hinauszögern.
Erst ab < 800px Breite wird es zweizeilig. (Bild-3, s.o.)
Grüße
gaby
Anzeige: Goneo - Du machst das Web!
Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
[Hinweis] KEINE CROSSPOSTINGS !
Autor: gaby
Datum: 09.06.2015 02:11:59
Entscheide dich bitte für _EIN_ Forum.
Multipostings sind nirgends gerne gesehen.
Eine nachvollziehbare Begründung für unseren verständlichen Wunsch findest du hier:
http://das-excel-forum.de/cross.htm
Grüße
gaby
(Moderator)
---------------------
Ich tacker das mal oben an, auch als Info für andere User.
